<template>

    <div style="overflow: hidden;">

        <div class="discuss-main">

            <!--点击发表评论-->
            <div class="comment-avatar" v-show="editDiscuss">
                <span :class="'avatar headportrait '+$util.getColorByPersonName(user.personname ? user.personname : '')">
                  {{
                              user.personname.length > 1
                                ? user.personname.substring(user.personname.length - 1, user.personname.length)
                                : user.personname
                            }}
                </span>
            </div>
            <div class="comment-main" v-show="editDiscuss" @click="changeEditDiscussStatus('publish')">
                <div class="fake-textarea">点击发表评论</div>
            </div>

            <div class="comment-avatar" v-show="!editDiscuss">
                <span :class="'avatar headportrait '+$util.getColorByPersonName(user.personname ? user.personname : '')">
                  {{
                              user.personname.length > 1
                                ? user.personname.substring(user.personname.length - 1, user.personname.length)
                                : user.personname
                            }}
                </span>
            </div>

            <div class="editDiscuss-main" v-show="!editDiscuss">
                <app-richtexteditor-comment :value="discuss" :data="JSON.stringify({'data':'1'})"
                                            @change="(val) =>{this.discuss =val}" ref="commentRichTextEditor"
                                            :height="266" name="discuss" :placeholder="commentplaceholder"
                                            :uploadparams='{objecttype:"task",version:"editor"}'
                                            :exportparams='{objecttype:"task",version:"editor"}' style="">
                </app-richtexteditor-comment>
                <v-btn class="send" color="cyan darken-1" @click="changeEditDiscuss('send')">发送评论</v-btn>
                <v-btn class="cancel" color="grey" @click="changeEditDiscussStatus('cancel')">取消</v-btn>

                <div class="editor-draft-tip">
                    <span class="tip-content">最后修改于{{this.lastediteddate}} </span>
                </div>

            </div>

        </div>

        <div class="footer-nitice">
            <!--                <v-divider class="split-line" ></v-divider>-->
            <div class="cc-members-avatars">
                <span>这些人会收到通知：</span>
                <span :class="'avatar headportrait '+$util.getColorByPersonName(user.personname ? user.personname : '')" style="float: right;margin-top: 5px;">
          {{
                      user.personname.length > 1
                        ? user.personname.substring(user.personname.length - 1, user.personname.length)
                        : user.personname
                    }}
        </span>
            </div>
            <div class="cc-members-settings will-notify-me">
                <a class="cc-members-link simple-loading" style="">编辑通知列表</a>
                <a class="cc-members-link simple-loading" style="">停止接收该内容的通知</a>
            </div>
        </div>
    </div>

</template>

<script lang="ts">
    import {Vue, Component, Prop, Model} from "vue-property-decorator";
    import ActionService from "@service/action/action-service";
    import TaskService from "@service/task/task-service";

    @Component({})
    export default class AppTaskIssuecomment extends Vue {

        /**
         * 视图参数
         *
         * @type {*}
         * @memberof AppTaskIssuecomment
         */
        @Prop() public readonly viewparams!: any;

        /**
         * 视图上下文
         *
         * @type {*}
         * @memberof AppTaskIssuecomment
         */
        @Prop() public readonly context!: any;

        /**
         * 最后修改时间
         * @type {string}
         * @memberof AppTaskIssuecomment
         */
        public lastediteddate: string = "";

        /**
         * 任务id
         * @type {string}
         * @memberof AppTaskIssuecomment
         */
        public taskId: string = "";

        /**
         * 用户信息
         * @type {object}
         * @memberof AppTaskIssuecomment
         */
        public user: any;

        /**
         * 生命周期
         * @memberof AppTaskIssuecomment
         */
        public created() {
            let win: any = window;
            let user: any = JSON.parse(win.localStorage.getItem("user"));
            if (user) {
                this.user = user;
            }
            let taskId = this.context.task;
            if (!taskId) {
                taskId = this.viewparams.taskId;
            }
            if (taskId) {
                this.taskId = taskId;
                this.searchTaskByTaskId(taskId);
            }
        }

        /**
         * 正在评论编辑
         * @type {boolean}
         * @memberof AppTaskIssuecomment
         */
        public editDiscuss: boolean = true;

        /**
         * 提示 点击发表评论
         * @type {string}
         * @memberof AppTaskIssuecomment
         */
        public commentplaceholder: string = "点击发表评论";

        /**
         * 评论
         * @type {string}
         * @memberof AppTaskIssuecomment
         */
        public discuss: string = "";

        /**
         * active的service
         * @type {ActionService}
         * @memberof AppTaskIssuecomment
         */
        public activeService: ActionService = new ActionService();

        /**
         * 实体服务对象
         * @type {TaskService}
         * @memberof AppTaskIssuecomment
         */
        public taskService: TaskService = new TaskService();

        /**
         * 改变评论编辑状态
         *
         * @param {string} [tag] 要更改的状态
         * @memberof AppTaskActiondata
         */
        public changeEditDiscussStatus(tag: string) {
            this.editDiscuss = !this.editDiscuss;
            if (!this.editDiscuss) {
                this.$forceUpdate();
                // 聚焦到富文本编辑器
                let commentRichTextEditor: any = this.$refs.commentRichTextEditor;
                commentRichTextEditor.getfocus();
            }
        }

        /**
         * 发表评论
         *
         * @param {string} [tag] 要进行的操作
         * @memberof AppTaskActiondata
         */
        public changeEditDiscuss(tag: any) {
            if (this.discuss == "") {
                return;
            }
            let params: any = {
                id: null,
                comment: this.discuss,
                objecttype: "task",
                objectid: this.taskId,
                notToLoginPage: true
            };
            return new Promise((resolve: any, reject: any) => {
                let result: Promise<any>;
                result = this.activeService.Create({}, params, true);
                result.then((response) => {
                    if (response && response.status === 200) {
                        if (response.data) {
                            // 获取任务相关action记录
                            this.$emit("getActionData", this.taskId);
                            // 改变编辑状态
                            this.editDiscuss = !this.editDiscuss;
                            // 重置评论区的值
                            this.discuss = "";
                            let richTextEditor: any = this.$refs.commentRichTextEditor;
                            richTextEditor.value = "";
                        }
                    }
                }).catch((response) => {
                    if (response.status === 401) {
                        this.$Notice.error({title: "未登录", desc: '编辑区域内容请先复制另存！请手动退出并重新登录。'});
                    } else {
                        this.$Notice.error({title: "错误", desc: '编辑区域内容请先复制另存！' + response.data.message});
                    }
                    reject(response);
                });
            });
        }

        /**
         * 查找任务
         *
         * @param {string} [taskId] 任务id
         * @memberof AppTaskActiondata
         */
        public searchTaskByTaskId(taskId: string) {
            return new Promise((resolve: any, reject: any) => {
                let result: Promise<any>;
                result = this.taskService.searchTaskByTaskId("tasks/" + taskId, {}, true);
                result
                    .then((response) => {
                        if (response && response.status === 200) {
                            if (response.data && response.data.id) {
                                if (
                                    JSON.stringify(response.data) &&
                                    JSON.stringify(response.data).length > 0
                                ) {
                                    this.lastediteddate = response.data.lastediteddate;
                                }
                            } else {
                                // const url: any = '/404';
                                // this.$router.push({path: url});
                                this.$Notice.error({
                                    title: "提示",
                                    desc: "该任务不存在，没有这个任务！",
                                });
                            }
                        }
                    })
                    .catch((response) => {
                        if (response && response.status === 500) {
                            const url: any = "/500";
                            this.$router.push({path: url});
                        } else {
                            this.$Notice.error({title: "错误", desc: response.data.detail});
                            reject(response);
                        }
                    });
            });
        }
    }
</script>

<style lang='less'>
    @import "./app-task-issuecomment.less";
</style>